<template>
  <mheader></mheader>
  <div class="main-body mx-auto">
    <div class="date">
      <div class="mx-auto flex" style="width: 1100px">
        <!-- 星期按钮 -->
        <span
          v-for="item in thisWeek"
          :key="item.week"
          class="px-2 rounded-sm center mr-2 text-sm cursor-pointer"
          @click="change(item)"
          :class="item.week == value ? 'text-white bg-sky-300' : 'bg-gray-300'"
          >{{ item.week }}</span
        >
      </div>
    </div>
    <el-divider />
    <div class="mx-auto" style="width: 1100px">
      <div class="grid gap-2 grid-cols-5">
        <comicCard v-for="(item, index) in list" :key="index" :obj="item" />
        <div class="col-span-5">
          <el-empty v-if="list.length == 0" description="暂时为空" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import mheader from "@/components/home-header.vue";
import request from "@/axios/http";
import { onMounted, ref } from "vue";
import comicCard from "@/components/comicCard.vue";
const form = ref(JSON.parse(sessionStorage.getItem("user")));
export default {
  name: "update",
  components: {
    mheader,
    comicCard,
  },
  data() {
    return {
      thisWeek: [],
      value: "星期一",
      list: [],
    };
  },
  methods: {
    change(item) {
      this.value = item.week;
      this.getList(item.date);
    },
    getList(time) {
      request({
        url: "comic/getAllComic",
        method: "post",
        data: {
          pageNum: 1,
          pageSize: 50,
          data: {
            update_time: time,
          },
        },
      }).then((res) => {
        if (res.code == 200) {
          this.list = res.data.records;
          console.log(this.list);
        }
      });
    },
    getTime(time) {
      //time = 7下周  -7上周   0本周
      let date = new Date(); //this.chaoZuoTime
      let currentFirstDate = new Date(date);

      let formatDate = function (date) {
        // console.log(date);
        let year = date.getFullYear(); //年
        let month = date.getMonth() + 1; //月
        let day = date.getDate(); //日;
        // let arr = ["日", "一", "二", "三", "四", "五", "六"];
        let week = [
          "星期日",
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
        ][date.getDay()];
        //我需要的格式是  （周几 月.日） 这里看你们的需求
        return { week: week, date: year + "-" + month + "-" + day };
      };

      let addDate = function (date, n) {
        // console.log(date.getDate() + n);
        date.setDate(date.getDate() + n);
        return date;
      };

      let setDate = function (date) {
        let week = date.getDay() - 1;
        date = addDate(date, week * -1);
        currentFirstDate = new Date(date);
        let weekList = [];
        for (let i = 0; i < 7; i++) {
          weekList[i] = formatDate(i == 0 ? date : addDate(date, 1));
        }
        return weekList;
      };

      // let upWeek = setDate(addDate(currentFirstDate, -7));
      this.thisWeek = setDate(addDate(currentFirstDate, -1)); //本周
      // let nextWeek = setDate(addDate(currentFirstDate, 7)); //下周
      let today = formatDate(date); //今日日期
      this.value = today.week;
      console.log(today, this.thisWeek);
      this.getList(today.date);
    },
  },
  mounted() {
    this.getTime();
  },
};
</script>
<style scoped lang="less">
.main-body {
  padding-top: 75px;
  /* background-color: aqua; */
}
.date {
  /* background-color: lightblue; */
  background: url("@/assets/picture/updatepage.jpg");
  height: 100px;
  //   width: 1100px;
  padding: 30px;
  position: relative;
  display: flex;
  overflow: hidden;
}
.date /deep/ .el-button {
  --el-button-border-color: #ffffff;
  --el-button-hover-text-color: white;
  --el-button-hover-bg-color: lightblue;
  // --el-button-active-border-color: black;
}
// .select {
//   color: #fff;
//   background-color: lightblue;
// }
</style>
